<template>
	<div id="box">
		<header>
			<div>
				<i class="iconfont icon-zuobiao"></i>
				<p>{{list1}}</p>
				<i class="iconfont icon-xia-copy"></i>
				<div>
					<div>
						<span>{{list2}}</span>
						<span>{{list3}}</span>
					</div>
					<i class="iconfont icon-icon-46"></i>
				</div>
			</div>
			<div></div>
			<div>
				<p v-for="(v,i) in list4" :key="i"><span>{{v}}</span></p>
			</div>
		</header>
			<div class="po">
				<input type="text" placeholder="搜索商家，商品名称" />
				<i class="iconfont icon-search"></i>
			</div>
		<swiper class="swiper-container" :options="swiperOption" ref="mySwiper">
			<swiper-slide>
				<div v-for="(v,i) in list5" :key="i">
					<img :src="v.path" />
					<span>{{v.name}}</span>
				</div>
			</swiper-slide>
			<swiper-slide>
				<div v-for="(v,i) in list6" :key="i">
					<img :src="v.path" />
					<span>{{v.name}}</span>
				</div>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
		<div class="dt">
			<img src="static/img/14.webp" />
		</div>
		<article class="art">
			<div class="pp"><div class="p">推荐商家</div></div>
			<router-link tag="div" to="/page2" v-for="(v,i) in list7" :key="i">
				<dl>
					<dt><img :src="v.img"></dt>
					<dd>
						<div><span>{{v.pp}}</span>{{v.name}}</div>
						<div><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i><i class="iconfont icon-star"></i>{{v.d}}单</div>
						<div>
							<div><span>{{v.money}}起送</span>|<span>配送费{{v.ps}}</span></div>
							<div><span>{{v.km}}</span>|<span>{{v.time}}</span></div>
						</div>
					</dd>
				</dl>
				<div>
					<p><i>{{v.one}}</i> {{v.ones}}</p>
					<p><i style="background: limegreen;">{{v.two}}</i> {{v.twos}}</p>
					<span>{{v.act}}个活动<i class="iconfont icon-xia-copy"></i></span>
				</div>
			</router-link>
		</article>
	</div>

</template>

<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		data() {
			return {
				swiperOption: {
					spaceBetween: 30,
					loop: true,
					pagination: {
						el: ".swiper-pagination",
						clickable: true
					}
				},
				list1: "东城区北京市政府",
				list2: "-2℃",
				list3: "晴天",
				list4: ["鲜果切", "奶茶", "煲仔饭", "水果39减20", "麦当劳", "汉堡王"],
				list5: [{
						name: '美食',
						path: 'static/img/01.webp'
					},
					{
						name: '晚餐',
						path: 'static/img/02.webp'
					},
					{
						name: '商超便利',
						path: 'static/img/03.webp'
					},
					{
						name: '果蔬生鲜',
						path: 'static/img/04.webp'
					},
					{
						name: '炸鸡炸串',
						path: 'static/img/05.webp'
					},
					{
						name: '大牌5折',
						path: 'static/img/06.webp'
					},
					{
						name: '甜品饮品',
						path: 'static/img/07.webp'
					},
					{
						name: '医药健康',
						path: 'static/img/08.webp'
					},

				],
				list6: [{
						name: '浪漫鲜花',
						path: 'static/img/09.webp'
					},
					{
						name: '麻辣烫',
						path: 'static/img/10.webp'
					},
					{
						name: '地方菜系',
						path: 'static/img/11.webp'
					},
					{
						name: '披萨意面',
						path: 'static/img/12.webp'
					},
					{
						name: '新店特惠',
						path: 'static/img/13.webp'
					},
				],
				list7: [
					{
						img: 'static/img/15.webp',
						pp: '品牌',
						name:'(吉野家)北京站店',
						d:'4.7 月  2239',
						money:'￥20',
						ps:'￥5',
						km:'2.53km',
						time:'47分钟',
						one:'首',
						ones:'新用户下单立减17元',
						two:'新',
						twos:'满30减12',
						act:'15'
					},
					{
						img: 'static/img/16.webp',
						pp: '品牌',
						name:'美味千层榴莲蛋糕',
						d:'4.7 月  2239',
						money:'￥20',
						ps:'￥5',
						km:'2.53km',
						time:'47分钟',
						one:'首',
						ones:'新用户下单立减17元',
						two:'新',
						twos:'满30减12',
						act:'15'
					},
					{
						img: 'static/img/18.webp',
						pp: '品牌',
						name:'美味千层榴莲蛋糕',
						d:'4.7 月  2239',
						money:'￥20',
						ps:'￥5',
						km:'2.53km',
						time:'47分钟',
						one:'首',
						ones:'新用户下单立减17元',
						two:'新',
						twos:'满30减12',
						act:'15'
					},
					{
						img: 'static/img/05.webp',
						pp: '品牌',
						name:'美味千层榴莲蛋糕',
						d:'4.7 月  2239',
						money:'￥20',
						ps:'￥5',
						km:'2.53km',
						time:'47分钟',
						one:'首',
						ones:'新用户下单立减17元',
						two:'新',
						twos:'满30减12',
						act:'15'
					},
				]
			}
		},
		methods: {
			//事件
		},
		mounted(){
			//原生js
		}
	}
</script>

<style scoped lang="less">
	//flexible
	.px2rem(@name, @px) {
		@{name}: @px / 37.5 * 1rem;
	}
	
	header {
		.px2rem(height, 130);
		background: rgb(0,143,255);
		display: flex;
		flex-direction: column;
		&>div {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			position: relative;
			.px2rem(padding-left, 14);
			.px2rem(padding-right, 14);
			&:first-child {
				.px2rem(font-size, 16);
				font-weight: bolder;
				justify-content: initial;
				i {
					.px2rem(font-size, 16);
					.px2rem(margin-right, 5);
					&:nth-child(3) {
						.px2rem(font-size, 10);
						.px2rem(margin-left, 5);
					}
				}
				div:last-child {
					position: absolute;
					font-weight: initial;
					.px2rem(right, 14);
					.px2rem(width, 50);
					.px2rem(font-size, 11);
					display: flex;
					.px2rem(line-height, 14);
					i {
						.px2rem(font-size, 30);
						line-height: initial;
					}
				}
			}
			
			&:last-child {
				display: flex;
				p {
					flex: 1;
					display: flex;
					height: 100%;
					.px2rem(font-size, 12);
					justify-content: center;
					align-items: center;
					&:nth-child(4) {
						.px2rem(font-size, 10.5);
					}
				}
			}
		}
	}
	.po{
		display: flex;
		justify-content: center;
		align-items: center;
		.px2rem(height, 43.33);
		.px2rem(margin-top,-86.66);
		.px2rem(margin-bottom,43.33);
		top:-1px;
		background: rgb(0,143,255);
		position: sticky !important;
		z-index: 999;
		input {
			.px2rem(height, 35);
			width: 95%;
			font-family: "宋体";
			border: none;
			text-align: center;
			.px2rem(font-size, 14);
			font-weight: bold;
			background: #fff;
		}
		i {
			position: absolute;
			color: #9c9c9c;
			.px2rem(left, 105);
			.px2rem(font-size, 13);
		}
			
	}
	.swiper-container {
		.px2rem(height, 180);
		&>div {
			&>div {
				&>div {
					width: 25%;
					float: left;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					height: 45%;
					img {
						.px2rem(width, 38);
						.px2rem(height, 38);
						.px2rem(margin-bottom, 10);
					}
					span{
						color: #666;
					}
				}
			}
		}
	}
	
	.dt {
		display: flex;
		justify-content: center;
		.px2rem(padding-bottom, 18);
		border-bottom: 1px solid rgb(245, 245, 245);
		.px2rem(border-bottom-width, 8);
		img {
			.px2rem(width, 356);
			.px2rem(height, 85);
		}
	}
	.art{
		&>div{
			border-bottom: 3px solid rgb(229,239,239);
			dl{
				display: flex;
				.px2rem(padding,12);

				dt{
					.px2rem(width,64);
					.px2rem(height,64);
					border:2px solid #ccc;
					.px2rem(margin-right,12);
					img{
						width: 100%;
						height:100%;
					}
				}
				dd{
					border-bottom: 3px dotted rgb(229,239,239);
					flex: 1;
					display: flex;
					flex-direction: column;
					.px2rem(font-size,12);
					&>div{
						flex: 1;
						display: flex;
						align-items: center;
					}
					&>div:first-child{
						.px2rem(font-size,15);
						font-weight:bold ;
						span{
							.px2rem(padding,1);
							.px2rem(padding-left,2);
							.px2rem(padding-right,2);
							.px2rem(font-size,11);
							background: rgb(255,236,23);
							border-radius:15% ;
							font-weight:initial ;
							.px2rem(margin-right,8);
						}
					}
					&>div:nth-child(2){
						display: flex;
						align-items: center;
						i{
							border-radius:15% ;
							.px2rem(margin,2);
							color: rgb(255,208,0);
							&:last-child{
								.px2rem(margin-right,5);
							}
						}
					}
					&>div:last-child{
						display: flex;
						justify-content: space-between;
						span{
							.px2rem(margin,5);
						}
						div:last-child{
							color: #999;
						}
					}
				}
			}
			&>div{
				display: flex;
				flex-direction: column;
				position: relative;
				.px2rem(margin-left,90);
				.px2rem(height,52);
				.px2rem(line-height,26);
				p{
					flex: 1;
					i{
						color: #fff;
						background: orange;
						border-radius:20% ;
						.px2rem(padding,1);
						.px2rem(padding-left,2);
						.px2rem(padding-right,2);
						.px2rem(font-size,11);
					}
				}
				span{
					position: absolute;
					right:5%;
					top: 5%;
				}
			}
		}
	}
	.p::after,.p::before{
        content: "";
        position: absolute;
        width: 20px;
        border: 1px solid red;
    }
    .p::after{
        left: -50%;
        top: 50%;
    }
    .p::before{
        left: 125%;
        top: 50%;
    }
    .pp{
            display: flex;
            justify-content: center;
            border-bottom:initial !important;
            .p{
            	margin-left: 0;
            	height: initial;
            }
        }
</style>